<template>
  <img :src="handImg" class="hand-img ripples  ">
</template>
<script>
export default {
  name: "",
  data () {
    return {
      handImg:require('./../assets/imgs/hand.png')
    };
  },
  computed:{
 
  },
  mounted(){
 
  },
  methods:{
 
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common';
@keyframes ripples {
  0%{ transform: scale(.8) }
  10% { transform: scale(.9) }
  20% { transform: scale(1) }
  30% { transform: scale(1.1) }
  40% { transform: scale(1.2) }
  50% { transform: scale(1.3) }
  60% { transform: scale(1.2) }
  70% { transform: scale(1.1) }
  80% { transform: scale(1) }
  90% { transform: scale(.9) }
  100% { transform: scale(.8) }
}
.hand-img{
  position: absolute;
  bottom: px2rem(-40);
  right: 15%;
  width: px2rem(102);
}
.ripples{
  animation: ripples 2s linear infinite;
}
</style>